<template>
  <div class="home">
    <el-col :span="16">
      <button @click="inputinfo">初始化赋值</button>
      <button @click="getval">获取值</button>
      <hr />
      <div id="divwangeditor"></div>
    </el-col>
  </div>
</template>

<script>
import wangEditor from "wangeditor";
export default {
  data() {
    return {
      editor: null,
      editorhtml: "",
      editotext: "",
    };
  },
  mounted() {
    const editor = new wangEditor(`#divwangeditor`);

    editor.config.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
    ];

    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorhtml = this.editor.txt.html();
      this.editortext = this.editor.txt.text();
    };
    // 创建编辑器
    editor.create();
    this.editor = editor;
  },
  methods: {
    inputinfo() {
      this.editor.txt.text("桥如虹，水如空");
    },
    getval() {
      console.log(this.editorhtml);
      console.log(this.editortext);
    },
  },
};
</script>

<style>
.w-e-toolbar {
  z-index: 2 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
  text-align: left;
}
</style>